<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝网-淘！我喜欢</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="web_shop">
    <!-- 头部导航条区域 -->
    <div class="contenter">
      <div class="header">
        <div class="left">
          <ul class="nav">
            <li>
              <a href="#">中国大陆</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a href="" class="xuanzhong">亲，请登录</a>
            </li>
            <li>
              <a href="">免费注册</a>
            </li>
            <li>
              <a href="">手机逛淘宝</a>
            </li>
          </ul>
        </div>
        <div class="right">
          <ul class="nav">
            <li>
              <a href="">我的淘宝</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a href="">购物车</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a href="">收藏夹</a>
            </li>
            <li>
              <a href="">商品分类</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a href="">卖家中心</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a href="">联系客服</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a href="">网站导航</a>
              <span class="arrow"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="body_1">
      <!-- 搜索框 -->
      <div class="search contenter">
        <div class="leftimg">
          <a href="www.taobao"></a>
        </div>
        <div class="seachcenter">
          <div class="seachtab">
            <a href="">淘宝</a>
            <a href="">天猫</a>
            <a href="">店铺</a>
          </div>
          <div>
            <form action="" class="seachform">
              <input type="text">
              <button>搜索</button>
            </form>
          </div>
          <ul>
            <li><a href="">新款连衣裙</a></li>
            <li><a href="">四件套</a></li>
            <li><a href="" class="xuanzhong">潮流T恤</a></li>
            <li><a href="">时尚女鞋</a></li>
            <li><a href="">短裤</a></li>
            <li><a href="">半身裙</a></li>
            <li><a href="">男士外套</a></li>
            <li><a href="">墙纸</a></li>
            <li><a href="">新款男鞋</a></li>
            <li><a href="">耳机</a></li>
          </ul>
        </div>
        <div class="rightimg">
          <img src="./img/jnh.png" alt="">
        </div>
      </div>
      <!-- 导航栏 -->
      <div class="nav contenter">
        <ul>
          <li class="leftnav"><a href="">主题市场</a></li>
          <li><a href="">天猫</a></li>
          <li><a href="">聚划算</a></li>
          <li><span>|</span></li>
          <li><a href="">天猫商城</a></li>
          <li><a href="">司法拍卖</a></li>
          <li><a href="">淘宝心选</a></li>
          <li><span>|</span></li>
          <li><a href="">飞猪旅行</a></li>
          <li><a href="">只能生活</a></li>
          <li><a href="">苏宁易购</a></li>
        </ul>
      </div>
      <!-- 内容区 -->
      <div class="content contenter">
        <div class="left">
          <!-- 功能条 -->
          <div class="leftlist">
            <ul>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
              <li>
                <a href="">女装</a>
                /
                <a href="">男装</a>
                /
                <a href="">内衣</a>
              </li>
            </ul>
          </div>
          <!-- 图片展示区 -->
          <div class="leftimag">
            <div class="img1">
              <img src="./img/tu1.jpg" alt="">
              <img src="./img/tu2.jpg" alt="">
            </div>
            <div class="img2">
              <img src="./img/tu3.jpg" alt="">
              <img src="./img/tu4.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="right">
          <div class="hillow">
            <img src="./img/hi.png" alt="">
          </div>
          <div class="right-btn">
            <a href="">登录</a>
            <a href="">注册</a>
            <a href="">开店</a>
          </div>
          <div class="webjubao">网上有害信息举报专区</div>
          <ul>
            <li><a href="">公告</a></li>
            <li><a href="">规则</a></li>
            <li><a href="">论坛</a></li>
            <li><a href="">安全</a></li>
            <li><a href="">公益</a></li>
          </ul>
          <div class="towspan">
            <div class="span1">公益阿里、腾讯等六家公司同台联合做公益</div>
            <div class="span2">淘宝造物节之城市秘密、聚划算88红包省钱卡</div>
          </div>
          <div class="rightchix">
            <ul>
              <li>
                <a href=""  class="ico ico-1"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-2"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-3"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-4"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href=""  class="ico ico-1"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-2"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-3"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-4"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href=""  class="ico ico-1"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-2"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-3"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-4"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href=""  class="ico ico-1"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-2"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-3"></a>
                <span>充话费</span>
              </li>
              <li>
                <a href="" class="ico ico-4"></a>
                <span>充话费</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- body-2 -->
      <div class="body-2 contenter">
        <div class="left">
          <div class="top">
            <img src="./img/body-2-logo-1.jpg" alt="">
            <h5>与品质生活不期而遇</h5>
          </div>
          <div class="conter">
            <ul>
              <li>
                <img src="./img/body-2-baby-1.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-2.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-3.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-1.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-2.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-3.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="left">
          <div class="top">
            <img src="./img/body-2-logo-1.jpg" alt="">
            <h5>与品质生活不期而遇</h5>
          </div>
          <div class="conter">
            <ul>
              <li>
                <img src="./img/body-2-baby-1.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-2.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-3.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-1.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-2.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
              <li>
                <img src="./img/body-2-baby-3.png" alt="">
                <p class="topp">小狗图案不锈钢皂</p>
                <p class="xiap">小狗图案不锈钢皂</p>
                <div class="my1214">1214人说好</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- body-3 热卖单品 -->
      <div class="body-3 contenter">
        <h1>
          <div class="ico"></div>
          热卖单品
        </h1>
        <ul>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
          <li>
            <img src="./img/body-3-1.png" alt="">
            <p>纯棉男女军绿色t恤2018新款宽松韩版初秋长</p>
            <div class="pingjia">
              评价：17705 收藏：6875
            </div>
          </li>
        </ul>
      </div>
      <!-- footer区域 -->
      <div class="footer contenter">
        <ul>
          <li>
            <h4>消费者保证</h4>
            <p>保障范围 退货退款流程 服务中心 更多特色服务</p>
          </li>
          <li>
            <h4>消费者保证</h4>
            <p>保障范围 退货退款流程 服务中心 更多特色服务</p>
          </li>
          <li>
            <h4>消费者保证</h4>
            <p>保障范围 退货退款流程 服务中心 更多特色服务</p>
          </li>
          <li>
            <h4>消费者保证</h4>
            <p>保障范围 退货退款流程 服务中心 更多特色服务</p>
          </li>
        </ul>
      </div>

    </div>
  </div>
  
</body>
</html>